<template>
  <view>
     <u-modal v-model="ordershow" :show-cancel-button="true" content="确认取消订单" @confirm="mulaneyorder"></u-modal>
          <u-modal v-model="deleteordershow" :show-cancel-button="true" content="确认删除订单" @confirm="deleteorder"></u-modal>
          	<u-toast ref="uToast" />
    <!-- 弹出层-->
    <view class="">
      <u-popup v-model="show" mode="center" border-radius="20" :mask-close-able="false">
        <view class="ball">
          <!-- 支付方式 -->
          <view class="way">
            <text class="way-name">支付方式</text>
            <u-icon name="close" @click="show = false" class="way-icon" size="40rpx"
              color="#cdcdcd">
            </u-icon>
          </view>
          <!-- 支付金额 -->
          <view class="Paymentamount">
            <text class="Paymentamount-name">支付金额{{fukuanjine}}元</text>
          </view>
          <!-- 支付选项 -->
          <view class="option">
            <!-- 余额支付 -->
            <view class="yu">
              <view class="yu-box">
                <view class="yu-img">
                  <image src="../../static/images/yuer.png" mode="" class="yu-image"></image>
                </view>
                <view class="yu-zhifuu">
                  <text class="yu-zhifu">余额支付</text>
                  <text class="yu-zhifus">账户余额不足</text>
                </view>
              </view>
              <view class="yu-Recharge">
                <text>去充值</text>
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <!-- 微信支付 -->
            <view class="wx">
              <view class="wx-box">
                <view class="wx-img">
                  <image src="../../static/images/weixinzhif.png" mode="" class="wx-image"></image>
                </view>
                <text class="wx-zhifu">微信支付</text>
              </view>
              <view class="wx-icon">
                <icon type="success" color="#ff4544"></icon>
              </view>
            </view>
          </view>
          <!-- 提交订单 -->
          <view class="orders" @click="paynow">
            <text class="orders-name">立即支付</text>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
          :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <view class="order" v-for="(res, index) in orderser.list" :key="index" v-if="orderser.list.length!==0">
                <view class="top">
                  <view class="left">
                    <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                    <view class="store"> 灯具专卖商城</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                  </view>
                  <view class="right">{{res.status}}</view>
                </view>
                <view class="item" @click="tioazhuanxinagq(res.id,res.status)">
                  <view class="left">
                    <image :src="res.image_url" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ res.name }}</view>
                    <view class="type"> 规格：默认</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{res.unit_price}}
                      <!-- <text class="decimal">425</text> -->
                    </view>
                    <view class="number">x{{res.quantity}}</view>
                  </view>
                </view>
                <view class="total">
                  共{{res.quantity}}件商品 合计:
                  <text class="total-price">
                    ￥{{res.total_price}}
                  </text>
                </view>

              </view>
              <u-empty text="暂无数据" mode="list" v-else></u-empty>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">

            <view class="page-box">
              <view class="order" v-for="(res, index) in orderser.list" :key="index" v-if="orderser.list.length!==0">
                <view class="top">
                  <view class="left">
                    <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                    <view class="store"> 灯具专卖商城</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                  </view>
                  <view class="right">等待买家付款</view>
                </view>
                <view class="item" @click="tioazhuanxinagq(res.id,res.status)">
                  <view class="left">
                    <image :src="res.image_url" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ res.name }}</view>
                    <view class="type"> 规格：默认</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{res.unit_price}}
                      <!-- <text class="decimal">425</text> -->
                    </view>
                    <view class="number">x{{res.quantity}}</view>
                  </view>
                </view>
                <view class="total">
                  共{{res.quantity}}件商品 合计:
                  <text class="total-price">
                    ￥{{res.total_price}}
                  </text>
                </view>
                <view class="bottom">
                  <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
                  <view class="logistics btn" @click="mulaneyorderid(res.id,res.statuser)">取消订单</view>
                  <view class="exchange btn" @click="deleteorderid(res.id,res.statuser)">删除订单</view>
                  <view class="evaluate btn" @click="jixufukuan(res.id,res.total_price,res.statuser)">继续付款</view>
                </view>
              </view>
              <u-empty text="暂无数据" mode="list" v-else></u-empty>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <view class="order" v-for="(res, index) in orderser.list" :key="index" v-if="orderser.list.length!==0">
                <view class="top">
                  <view class="left">
                    <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                    <view class="store"> 灯具专卖商城</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                  </view>
                  <view class="right">等待卖家发货</view>
                </view>
                <view class="item" @click="tioazhuanxinagq(res.id,res.status)">
                  <view class="left">
                    <image :src="res.image_url" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ res.name }}</view>
                    <view class="type"> 规格：默认</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{res.unit_price}}
                      <!-- <text class="decimal">425</text> -->
                    </view>
                    <view class="number">x{{res.quantity}}</view>
                  </view>
                </view>
                <view class="total">
                  共{{res.quantity}}件商品 合计:
                  <text class="total-price">
                    ￥{{res.total_price}}
                  </text>
                </view>
                <view class="bottom">
                  <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
              <view class="logistics btn" @click="mulaneyorderid(res.id,res.statuser)">取消订单</view>
                    <view class="exchange btn" @click="deleteorderid(res.id,res.statuser)">删除订单</view>
                  <view class="evaluate btn" @click="cuifahua"> 催发货</view>
            
                </view>
              </view>
              <u-empty text="暂无数据" mode="list" v-else></u-empty>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <view class="order" v-for="(res, index) in orderser.list" :key="index" v-if="orderser.list.length!==0">
                <view class="top">
                  <view class="left">
                    <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                    <view class="store"> 灯具专卖商城</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                  </view>
                  <view class="right">卖家已发货</view>
                </view>
                <view class="item" @click="tioazhuanxinagq(res.id,res.status)">
                  <view class="left">
                    <image :src="res.image_url" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ res.name }}</view>
                    <view class="type"> 规格：默认</view>
                    <view class="delivery-time">
                      发货时间
                    </view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{res.unit_price}}
                      <!-- <text class="decimal">425</text> -->
                    </view>
                    <view class="number">x{{res.quantity}}</view>
                  </view>
                </view>
                <view class="total">
                  共{{res.quantity}}件商品 合计:
                  <text class="total-price">
                    ￥{{res.total_price}}
                  </text>
                </view>
                <view class="bottom">
                  <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
                  <view class="logistics btn" @click="Yanchangshouhuo">延长收货</view>
                  <view class="exchange btn" @click="querenshouhuo(res.id,res.statuser)">确认收货</view>
                  <view class="evaluate btn" @click="wuliuxingaqin">查看物流</view>
                </view>
              </view>
              <u-empty text="暂无数据" mode="list" v-else></u-empty>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <view class="order" v-for="(res, index) in orderser.list" :key="index" v-if="orderser.list.length!==0">
                <view class="top">
                  <view class="left">
                    <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                    <view class="store"> 灯具专卖商城</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                  </view>
                  <view class="right">交易成功</view>
                </view>
                <view class="item" @click="tioazhuanxinagq(res.id,res.status)">
                  <view class="left">
                    <image :src="res.image_url" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ res.name }}</view>
                    <view class="type"> 规格：默认</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{res.unit_price}}
                      <!-- <text class="decimal">425</text> -->
                    </view>
                    <view class="number">x{{res.quantity}}</view>
                  </view>
                </view>
                <view class="total">
                  共{{res.quantity}}件商品 合计:
                  <text class="total-price">
                    ￥{{res.total_price}}
                  </text>
                </view>
                <view class="bottom">
                  <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
                <view class="exchange btn" @click="deleteorderid(res.id,res.statuser)">删除订单</view>
                       <view class="exchange btn" @click="zaicaigoumai(res.goodsid)">再次购买</view>
                  <view class="evaluate btn" @click="pingjia(res.goodsid)">去评价</view>
                </view>
              </view>
              <u-empty text="暂无数据" mode="list" v-else></u-empty>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    orderUserStore
  } from "../../store/order.js"
  import {
    onLoad
  } from '@dcloudio/uni-app';
  const orderStore = orderUserStore()
  const {
    orderser
  } = orderStore
  orderStore.getorderers("all")
  const list = ref([{
      name: '全部',
    },
    {
      name: '待付款'
    },
    {
      name: '待发货'
    },
    {
      name: '待收货'
    },
    {
      name: '待评价',
    }
  ])
  const {
    proxy
  } = getCurrentInstance()
  const current = ref(0)
  const swiperCurrent = ref(0)
  const dx = ref(0)
  //定义付款弹出框
  const show = ref(false)
  //定义付款订单id
  const fukuanid = ref(0)
  //定义付款金额
  const fukuanjine = ref(0)
  //定义选中的状态
  const statuser = ref("")
  //是否显示取消订单
  const ordershow = ref(false)
  //是否显示删除订单
  const deleteordershow = ref(false)
  //点击付款
  function jixufukuan(id,price,statuserr){
    show.value = true
    fukuanid.value = id
    fukuanjine.value = price
    statuser.value = statuserr
  }
  //付款
  function paynow(){
    show.value = false
    orderStore.jixufukuan(fukuanid.value,statuser.value)
  }
  //取消订单id
  function mulaneyorderid(id,statuserr){
      ordershow.value = true
       fukuanid.value = id
       statuser.value = statuserr
  }
  //删除订单id
  function deleteorderid(id,statuserr){
       deleteordershow.value = true
       fukuanid.value = id
       statuser.value = statuserr
  }
  //取消订单
  function mulaneyorder(){
    orderStore.mulaneyorder(fukuanid.value,statuser.value)
  }
  //删除订单
  function deleteorder(){
    orderStore.deleteorder(fukuanid.value,statuser.value)
  }
  onLoad((option) => {
    if (option.index) {
      change(option.index)
      // transition()
    }

  })
  // tab栏切换
  function change(index) {
    qingqiuhans(index)
    swiperCurrent.value = index
  }
//滑动
  function animationfinish({
    detail: {
      current
    }
  }) {
    qingqiuhans(current)
    proxy.$refs.tabs.setFinishCurrent(current);

  }
  //封装请求函数
  function qingqiuhans(index) {
    if (index === 0) {
      orderStore.getorderers("all")
    } else if (index === 1) {
      orderStore.getorderers("unpaid")
    } else if (index === 2) {
      orderStore.getorderers("paid")
    } else if (index === 3) {
      orderStore.getorderers("shipped")
    } else if (index === 4) {
      orderStore.getorderers("delivered")
    }
  }
  //催发货
  function cuifahua(){
    proxy.$refs.uToast.show({
  					title: '已经催发货啦，尽快为您安排发货',
  					type: 'warning',
  				})
  }
  //再次购买
  function zaicaigoumai(goodid) {
     uni.navigateTo({
       url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
     })
  }
  //延长收货时间
  function Yanchangshouhuo(){
    proxy.$refs.uToast.show({
    				title: '已延长收货时间',
    				type: 'warning',
    			})
  }
  //跳转订单详情
  function tioazhuanxinagq(id,status){
    uni.navigateTo({
      url: `/subPack/Orderdetail/Orderdetail?id=${id}&status=${status}`
    })
  }
  //跳转物流详情
  function wuliuxingaqin(){
    uni.navigateTo({
      url: `/subPack/Logisticsdetails/Logisticsdetails`
    })
  }
  //确认收货
  function querenshouhuo(id,statuser){
        orderStore.querenshouhuo(id,statuser)
  }
  //商品评价
  function pingjia(id){
    uni.navigateTo({
      url: `/subPack/appraisal/appraisal?id=${id}`
    })
  }
</script>

<style>
  /* #ifndef H5 */
  page {
    height: 100%;
    background-color: #f2f2f2;
  }

  /* #endif */
</style>

<style lang="scss" scoped>
  .order {
    width: 710rpx;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 28rpx;

    .top {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .store {
          margin: 0 10rpx;
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .right {
        color: $u-type-warning-dark;
      }
    }

    .item {
      display: flex;
      margin: 20rpx 0 0;

      .left {
        margin-right: 20rpx;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }
      }

      .content {
        .title {
          font-size: 28rpx;
          line-height: 50rpx;
        }
        .type {
          margin: 10rpx 0;
          font-size: 24rpx;
          color: $u-tips-color;
        }
        .delivery-time {
          color: #e5d001;
          font-size: 24rpx;
        }
      }
      .right {
        margin-left: 10rpx;
        padding-top: 20rpx;
        text-align: right;

        .decimal {
          font-size: 24rpx;
          margin-top: 4rpx;
        }

        .number {
          color: $u-tips-color;
          font-size: 24rpx;
        }
      }
    }

    .total {
      margin-top: 20rpx;
      text-align: right;
      font-size: 24rpx;

      .total-price {
        font-size: 32rpx;
      }
    }

    .bottom {
      display: flex;
      margin-top: 40rpx;
      padding: 0 10rpx;
      justify-content: space-between;
      align-items: center;

      .btn {
        line-height: 52rpx;
        width: 160rpx;
        border-radius: 26rpx;
        border: 2rpx solid $u-border-color;
        font-size: 26rpx;
        text-align: center;
        color: $u-type-info-dark;
      }

      .evaluate {
        color: $u-type-warning-dark;
        border-color: $u-type-warning-dark;
      }
    }
  }

  .centre {
    text-align: center;
    margin: 200rpx auto;
    font-size: 32rpx;

    image {
      width: 164rpx;
      height: 164rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
    }

    .tips {
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
    }

    .btn {
      margin: 80rpx auto;
      width: 200rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      color: #ffffff;
      font-size: 26rpx;
      background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
    }
  }

  .wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
  }

  .swiper-box {
    flex: 1;
  }

  .swiper-item {
    height: 100%;
  }
  .ball {
  	width: 660rpx;
  	height: 650rpx;
  
  	// 支付方式
  	.way {
  		width: 100%;
  		height: 100rpx;
  		line-height: 100rpx;
  		// border: 1px solid red;
  		border-bottom: 1px solid #e2e2e2;
  		text-align: center;
  
  		.way-name {
  			font-size: 18px;
  		}
  
  		.way-icon {
  			position: relative;
  			left: 200rpx;
  		}
  	}
  
  	// 支付金额
  	.Paymentamount {
  		width: 100%;
  		height: 150rpx;
  		line-height: 150rpx;
  		// border: 1px solid red;
  		text-align: center;
  
  		.Paymentamount-name {
  			font-size: 17px;
  			font-weight: 600;
  		}
  	}
  
  	// 支付选项
  	.option {
  		width: 100%;
  		height: 260rpx;
  		// border: 1px solid red;
  
  		.yu {
  			width: 90%;
  			height: 130rpx;
  			// border: 1px solid red;
  			// border-bottom: 1px solid #e2e2e2;
  			margin: 0 auto;
  			display: flex;
  			align-items: center;
  			justify-content: space-between;
  
  			.yu-box {
  				// width: 300rpx;
  				height: 100rpx;
  				// border: 1px solid red;
  				display: flex;
  
  				.yu-img {
  					width: 75rpx;
  					height: 75rpx;
  
  					.yu-image {
  						width: 100%;
  						height: 100%;
  					}
  				}
  
  				.yu-zhifuu {
  					width: 300rpx;
  					height: 100rpx;
  					// border: 1px solid red;
  					margin-left: 20rpx;
  
  					.yu-zhifu {
  						font-size: 34rpx;
  						display: block;
  					}
  
  					.yu-zhifus {
  						font-size: 25rpx;
  						display: block;
  						color: #999999;
  					}
  				}
  			}
  
  			.yu-Recharge {
  				// width: 150rpx;
  				height: 100rpx;
  				line-height: 80rpx;
  				// border: 1px solid red;
  				color: #ff6f6e;
  			}
  		}
  
  		.wx {
  			width: 90%;
  			height: 130rpx;
  			line-height: 130rpx;
  			// border: 1px solid red;
  			margin: 0 auto;
  			display: flex;
  			// justify-content: center;
  			align-items: center;
  			justify-content: space-between;
  
  			.wx-box {
  				width: 300rpx;
  				height: 100rpx;
  				line-height: 90rpx;
  				// border: 1px solid red;
  				display: flex;
  
  				.wx-img {
  					width: 80rpx;
  					height: 80rpx;
  					// border: 1px solid red;
  
  					.wx-image {
  						width: 100%;
  						height: 100%;
  					}
  				}
  
  				.wx-zhifu {
  					font-size: 34rpx;
  					padding-left: 20rpx;
  				}
  			}
  
  			.wx-icon {
  				height: 100rpx;
  				line-height: 100rpx;
  				// border: 1px solid red;
  				text-align: center;
  			}
  		}
  }
  // 提交
  .orders {
  	width: 90%;
  	height: 100rpx;
  	line-height: 100rpx;
  	text-align: center;
  	// border: 1px solid red;
  	margin: 0 auto;
  	border-radius: 25px;
  	background-color: #ff4544;
  
  	.orders-name {
  		color: #fff;
  		font-size: 18px;
  	}
  }
  }
  	
</style>